<template>
  <div class="order-review-list">
    <van-nav-bar left-arrow fixed placeholder :border="false" title="评价中心" @click-left="$router.back()"/>
    <van-tabs v-model="tabActive" sticky swipeable animated :line-width="40"
              @change="handleChangeTab">
      <van-tab title="待评论" name="awaiting_review">
        <white-space/>
        <order-awaiting-review-list/>
      </van-tab>
      <van-tab title="已评论" name="reviewed">
        <white-space/>
        <order-review-list/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { order as Order } from "@mall/api-services"
import * as _ from "lodash"
import WhiteSpace from "@/components/WhiteSpace"
import { Icon, NavBar, Tab, Tabs } from "vant"
import OrderReviewList from "@/components/order/OrderReviewList"
import OrderAwaitingReviewList from "@/views/order/OrderAwaitingReviewList"

const { AwaitingReview, Reviewed } = Order.OrderStatus

export default {
  name: "OrderReviewListView",
  components: {
    OrderAwaitingReviewList,
    OrderReviewList,
    WhiteSpace,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  props: {
    statuses: Array,
  },
  data() {
    return {
      tabActive: AwaitingReview,
    }
  },
  created() {
    const { statuses } = this
    this.tabActive = _.includes(statuses, Reviewed) ? Reviewed : AwaitingReview
  },
  methods: {
    handleChangeTab(name) {
      this.$router.replace({
        path: "/orders/reviews",
        query: {
          statuses: name,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.order-review-list {

}
</style>
